<template>
  <div>
    <div class="contanier border_top">
      <div class="nav flex align-center">
        <div
          v-for="(item, index) in navList"
          :key="index"
          class="flex align-center"
          :class="nav_act == index ? 'active' : ''"
          @click="navclcik(index, item.path)"
        >{{ item.name }}</div>
        <span class="morex">[查看更多]</span>
      </div>
      <ul class="allList" @click="$router.push('./knowXq')" v-if="nav_act==0">
        <li>
          国务院办公厅印发《关于完善仲裁制度提高仲裁公信力的若干意见》
          <span>2018.06.21</span>
        </li>
        <li>
          国务院办公厅关于推进养老服务发展的意见
          <span>2016.11.03</span>
        </li>
        <li>
          《关于统筹推进自然资源资产产权制度改革的指导意见》
          <span>2016.11.03</span>
        </li>
        <li>
          中共中央印发《中国共产党党组工作条例》
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于修改部分行政法规的决定
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于落实《政府工作报告》重点工作部门分工的意见
          <span>2016.11.03</span>
        </li>
        <li>
          关于同意建立自然灾害防治工作部际联席会议制度的函
          <span>2016.11.03</span>
        </li>
        <li>
          关于同意建立自然灾害防治工作部际联席会议制度的函
          <span>2016.11.03</span>
        </li>
        <li>
          中共中央办公厅 国务院办公厅关于调整工业和信息化部职责的通知
          <span>2016.11.03</span>
        </li>
        <li>
          中国银行保险监督管理委员会职能配置、内设机构和人员编制规定
          <span>2016.11.03</span>
        </li>
        <li>
          四部门有关负责人就《降低社会保险费率综合方案》答记者问
          <span>2016.11.03</span>
        </li>
        <li>
          我国修改6部行政法规部分条款促进简政放权
          <span>2016.11.03</span>
        </li>
        <li>
          国家发改委规划司有关负责人：积极推动已在城镇就业的农业转移人口落户
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于改革公务员工资制度的通知
          <span>2016.11.03</span>
        </li>
        <li>
          体育总局装备中心解读《体育产业统计分类（2019）》
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于同意江苏大丰港口岸对外放的 批 复
          <span>2016.11.03</span>
        </li>
      </ul>
      <ul class="allList" @click="$router.push('./knowXq')" v-if="nav_act==1">
        <li>
          国务院办公厅印发《关于完善仲裁制度提高仲裁公信力的若干意见》
          <span>2018.06.21</span>
        </li>
        <li>
          国务院办公厅关于推进养老服务发展的意见
          <span>2016.11.03</span>
        </li>
        <li>
          《关于统筹推进自然资源资产产权制度改革的指导意见》
          <span>2016.11.03</span>
        </li>
        <li>
          中共中央印发《中国共产党党组工作条例》
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于修改部分行政法规的决定
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于落实《政府工作报告》重点工作部门分工的意见
          <span>2016.11.03</span>
        </li>
      </ul>
      <ul class="allList" @click="$router.push('./knowXq')" v-if="nav_act==2">
        <li>
          国务院办公厅印发《关于完善仲裁制度提高仲裁公信力的若干意见》
          <span>2018.06.21</span>
        </li>
        <li>
          国务院办公厅关于推进养老服务发展的意见
          <span>2016.11.03</span>
        </li>
        <li>
          《关于统筹推进自然资源资产产权制度改革的指导意见》
          <span>2016.11.03</span>
        </li>
        <li>
          中共中央印发《中国共产党党组工作条例》
          <span>2016.11.03</span>
        </li>
        <li>
          国务院关于修改部分行政法规的决定
          <span>2016.11.03</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "indexProduct",
  components: {},
  data() {
    return {
      navList: [],
      nav_act: 0,
    };
  },
  mounted(){
    this.getGgfL()
  },
  methods: {
    navclcik(index, path) {
      this.nav_act = index;
    },
    getGgfL() {
      this.$api
        .getGgFl({})
        .then((res) => {
          this.navList = res.data.data
        })
        .catch((e) => {});
    },
  },
};
</script>

<style lang="stylus" scoped>
.contanier {
  width: 588px;
  height: 562px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.nav {
  position: relative;
}

.nav>div {
  height: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #BF242A;
  padding: 0 20px;
  cursor: pointer;
}

.nav>div.active {
  color: #ffffff;
  border-color: #ffffff;
  background: #EB424C;
  // border-image: -webkit-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: -moz-linear-gradient(to right, #00036B, #409EFF) 30 30;
  // border-image: linear-gradient(to right, #00036B, #409EFF) 30 30;
}

.morex {
  display: inline-block;
  font-size: 14px;
  color: #666666;
  position: absolute;
  right: 12px;
  cursor: pointer;
}

.allList {
  position: relative;
  cursor: pointer;

  li {
    font-size: 14px;
    color: #323131;
    margin-top: 12px;
    width: 455px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;

    span {
      color: #585858;
      font-size: 14px;
      position: absolute;
      right: 12px;
    }
  }
}
</style>
